<template>
	<view class="container">
		<view class="tab-box">
			<view @tap="tabChange(index)" class="tab-item" v-for="(item,index) in serviceList" :key="index">
				<view class="item-label" :class="{'item-label-a': curIndex == index}">{{item.name}}</view>
				<view class="item-line" v-show="curIndex == index"></view>
			</view>
		</view>
		<view class="swiper-box">
			<swiper :style="{height: swiperHeight + 'px'}" :current="curIndex" duration="300" @change="swiperChange">
				<swiper-item>
					<view class="list-box">
						<view class="item-university">
							<view class="item-info">
								<view class="item-avatar">
									<image mode="widthFix" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20140210%2F20140210134626-1536511481.jpg&refer=http%3A%2F%2Fpic.baike.soso.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613705065&t=1df136cba754ab3b9abe8f763ca34a93"></image>
								</view>
								<view class="item-name-label">
									<view class="item-name">福建医科大学</view>
									<view class="item-label-box">
										<view class="item-university-label">双一流</view>
										<view class="item-university-label">本科</view>
									</view>
								</view>
							</view>
							<view class="item-arrow">
								<image mode="widthFix" src="../../static/images/14x24.png"></image>
							</view>
						</view>
					</view>
					<view class="list-box">
						<view class="item-university">
							<view class="item-info">
								<view class="item-avatar">
									<image mode="widthFix" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20140210%2F20140210134626-1536511481.jpg&refer=http%3A%2F%2Fpic.baike.soso.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613705065&t=1df136cba754ab3b9abe8f763ca34a93"></image>
								</view>
								<view class="item-name-label">
									<view class="item-name">福建医科大学</view>
									<view class="item-label-box">
										<view class="item-university-label">双一流</view>
										<view class="item-university-label">本科</view>
									</view>
								</view>
							</view>
							<view class="item-arrow">
								<image mode="widthFix" src="../../static/images/14x24.png"></image>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="list-box">
						<view class="item-major">
							<view class="major-info">
								<view class="major-name">计算机应用技术</view>
								<view class="major-cate">理工类-计算机类</view>
							</view>
							<view class="major-arrow">
								<image mode="widthFix" src="../../static/images/14x24.png"></image>
							</view>
						</view>
					</view>
					<view class="list-box">
						<view class="item-major">
							<view class="major-info">
								<view class="major-name">计算机应用技术</view>
								<view class="major-cate">理工类-计算机类</view>
							</view>
							<view class="major-arrow">
								<image mode="widthFix" src="../../static/images/14x24.png"></image>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curIndex: 0,
				swiperHeight: 0,
				serviceList: [
					{id: 1, name: '院校'},
					{id: 2, name: '专业'}
				],
			}
		},
		
		onReady() {
			const that = this
			let el = uni.createSelectorQuery().selectAll('.list-box').boundingClientRect()
			el.exec(res => {
				that.swiperHeight = res[0][that.curIndex].height + 100
			})
		},
		
		methods: {
			
			tabChange(index) {
				this.curIndex = index
			},
			
			swiperChange(e) {
				const that = this
				that.curIndex = e.detail.current
				let el = uni.createSelectorQuery().selectAll('.list-box').boundingClientRect()
				el.exec(res => {
					that.swiperHeight = res[0][that.curIndex].height + 100
				})
			}
			
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
	
	.container {
		width: 750rpx;
	}
	
	.tab-box {
		width: 750rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #ffffff;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		z-index: 999999;
	}
	
	.tab-item {
		width: 188rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.item-label {
		color: #666666;
		font-size: 34rpx;
	}
	
	.item-label-a {
		color: #45d6b7 !important;
	}
	
	.item-line {
		width: 32rpx;
		height: 4rpx;
		background-color: #45d6b7;
		margin-top: 20rpx;
	}
	
	.swiper-box {
		margin-top: 130rpx;
	}
	
	.list-box {
		width: 750rpx;
		height: 170rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-bottom: 32rpx;
	}
	
	.item-university {
		width: 654rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.item-info {
		width: 314rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.item-avatar {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.item-avatar image {
		width: 120rpx;
	}
	
	.item-name {
		color: #333333;
		font-size: 30rpx;
		margin-top: 40rpx;
	}
	
	.item-label-box {
		margin-top: 10rpx;
	}
	
	.item-university-label {
		color: #f1882b;
		font-size: 20rpx;
		border: 2rpx solid #f1882b;
		margin-right: 8rpx;
		padding-left: 6rpx;
		padding-right: 6rpx;
	}
	
	.item-label-box {
		display: flex;
		flex-direction: row;
	}
	
	.item-arrow {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.item-arrow image {
		width: 14rpx;
	}
	
	.item-major {
		width: 682rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.major-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.major-name {
		color: #333333;
		font-size: 30rpx;
	}
	
	.major-cate {
		color: #999999;
		font-size: 24rpx;
		margin-top: 30rpx;
	}
	
	.major-arrow {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-right: 18rpx;
	}
	
	.major-arrow image {
		width: 14rpx;
	}
</style>
